<template>
	<view class="box">
		<!-- 填写信息区 -->
		<view class="form-box">
			<!--  图片等信息区-->
			<view class="name-box">
				<view class="row1 flex-row-align-center">
					<image src="../../static/avatar.jpg" mode=""></image>
					<view class="info-box">
						<view class="ass-name title">饶梦娇</view>

						<view class="price-box flex-row-align-center">
							￥
							<view class="price">20</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 陪打时长 -->
			<view class="ser-time-box">
				<view class="row2 flex-between">
					<view class="">陪打时长</view>
					2小时
				</view>
				<view class="row3 flex-between">
					<view class="">服务时间</view>
					<view class="time-box flex-row-align-center" @click="handlerOpenPopup">
						<view class="">今天</view>
						<view class="time">17:00</view>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
			<!--  出行方式区-->
			<view class="out-method-box">
				<view class="out-method">
					<view class="head flex-row-between-center">
						<view class="">出行方式</view>
						<uni-segmented-control
							paddingRL
							align-items="normal"
							:height="24"
							is-myself
							:current="curr"
							@clickItem="handlerClick"
							:values="items"
						></uni-segmented-control>
					</view>
					<view class="explain label">
						<view v-show="curr === 0" class="view1">全程共4.92公里，出租出行收取来回费用，白天起步10.00元，超过3公里部分每公里1.80元</view>
						<view v-show="curr === 1" class="view2">哈哈哈</view>
					</view>
				</view>
				<view class="predict-take flex-between">
					<view class="">预估车费</view>
					<view class="flex-row-align-center">
						￥
						<view style="color: red">27</view>
					</view>
				</view>
				<view class="tic-box flex-between">
					<view class="label">优惠券</view>
					<view class="flex-row-align-center" @click="goMyTicket">
						<view class="">已优惠0元</view>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="note-box flex-between">
					<view class="label">备注</view>
					<view class="flex-row-align-center">
						<input placeholder="选填" />
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 下单须知 -->
			<view class="">
				<uni-section title="下单须知">
					<template #right>
						<view style="color: green" class="flex-row-align-center" @click="lookHandler">
							详情
							<uni-icons type="right"></uni-icons>
						</view>
					</template>
					<text class="content label">
						1.下单后，请及时联系陪打员确认出行时间和地点，并支付费用。
						<view class="">2.陪打员会在约定时间到达，如未按时到达，请及时联系客服。</view>
						<view class="">3.陪打员服务时间为2小时，如需延长，请提前与陪打员协商。</view>
						<view class="">4.陪打员服务过程中，请遵守交通规则，确保安全。</view>
						<view class="">5.如因陪打员原因导致服务中断，请及时联系客服处理。</view>
					</text>
				</uni-section>
			</view>
		</view>
		<!-- 支付按钮和金额 -->
		<view class="wx-pay flex-between fixed">
			<view class="money">
				<view class="sum flex-row-align-center">
					合计:￥
					<view class="total">60.00</view>
				</view>
				<view class="flex-row-align-center disc">
					优惠:
					<view class="digit">￥0.00</view>
				</view>
			</view>
			<button size="mini" class="pay-btn">微信支付</button>
		</view>
		<!-- 底部弹出层选择时间 -->
		<uni-popup type="bottom" ref="popupBottom" :is-mask-click="false">
			<my-popup :popup="popupBottom">
				<template #segment>
					<!-- 分段器 -->
					<uni-segmented-control :current="currDate" @clickItem="handleClickItem" :values="dateArr" is-myself></uni-segmented-control>
				</template>
				<!-- 时间单元格 -->
				<template #scrView>
					<view v-show="currDate === 0" class="scoll-box today">
						<template v-for="str of times" :key="str">
							<view class="item">{{ str }}</view>
						</template>
					</view>
					<view v-show="currDate === 1" class="scoll-box tomorow">
						<template v-for="str of commonTimes" :key="str">
							<view class="item">{{ str }}</view>
						</template>
					</view>
					<view v-show="currDate === 2" class="scoll-box tomorow">
						<template v-for="str of commonTimes" :key="str">
							<view class="item">{{ str }}</view>
						</template>
					</view>
					<view v-show="currDate === 3" class="scoll-box tomorow">
						<template v-for="str of commonTimes" :key="str">
							<view class="item">{{ str }}</view>
						</template>
					</view>
				</template>
				<template #footer>
					<!-- 确定按钮 -->
					<button type="primary" style="margin: 16rpx 20rpx">确定</button>
				</template>
			</my-popup>
		</uni-popup>

		<!-- 下单须知弹出层 -->
		<uni-popup ref="payNeedKnowPopup" :is-mask-click="false" type="bottom">
			<my-popup title="下单须知" subTitle="关闭" :popup="payNeedKnowPopup">
				<template #scrView>
					<!-- 富文本内容 -->
					<view class="rich-text-box">
						<view class="" v-for="(item, index) in 16" :key="index">富文本</view>
						<!-- <rich-text></rich-text> -->
					</view>
				</template>
				<template #footer>
					<!-- 底部安全区 -->
					<view class="bottom"></view>
				</template>
			</my-popup>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const items = ['滴滴/出租', '公交/地铁'];
const dateArr = ['今天10-11', '明天10-12', '后天10-13', '周一10-14'];

const times = ref(generateTimes());
const commonTimes = ref(generateTimes(new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(0, 0, 0))));
const curr = ref(0);
const currDate = ref(0);
const popupBottom = ref(null);
const payNeedKnowPopup = ref(null);

function handlerClick(e) {
	curr.value = e.currentIndex;
}
// 跳转我的优惠券页面
function goMyTicket() {
	uni.navigateTo({
		url: '/subpkg/my-ticket/my-ticket'
	});
}
// 查看下单须知
function lookHandler() {
	payNeedKnowPopup.value.open();
}
// 点击关闭下单须知弹出层
function ClosePnkp() {
	payNeedKnowPopup.value.close();
}
// 点击选择时间
function handlerOpenPopup() {
	popupBottom.value.open();
}

// 点击切换时间视图
function handleClickItem({ currentIndex: index }) {
	currDate.value = index;
}
// 接收参数
onLoad((options) => {
	console.log(options);
});
/*
定义一个函数，该函数根据当前时间生成一个包含30分钟间隔的时间数组
参数：
date：日期时间对象，默认为当前日期时间
一个包含30分钟间隔的时间数组，格式为"HH:mm"
 */
function generateTimes(date = new Date()) {
	/*
	比如现在是13：23，应该从 14:00开始，14=getHour+1;
	如果是13:34,靠近它的间隔大于等于30分钟下一个时间是14：30，14=getHour+1，30minute；
	如果是13：30，getMinute=30===30，应该从14：00开始
	*/
	const result = [];
	// 获取分钟判断是否大于30
	const minute = date.getMinutes();
	const hour = date.getHours();
	let startMs = date.getTime();
	if (hour !== 23) {
		if (minute > 30) {
			startMs = date.setHours(hour + 1, 30, 0);
		} else if (minute === 0) {
			startMs = date.setHours(hour, 30, 0);
		} else {
			startMs = date.setHours(hour + 1, 0, 0);
		}
	} else {
		if (minute == 0) {
			startMs = date.setHours(hour, 30, 0);
		}
	}

	const endMs = date.setHours(23, 30, 0);

	for (let i = startMs; i <= endMs; i += 30 * 60 * 1000) {
		let hm = new Date(i).getHours() + ':' + new Date(i).getMinutes().toString().padStart(2, '0');
		result.push(hm);
	}

	return result;
}
</script>

<style lang="scss" scoped>
.box {
	min-height: 100vh;
	background: $uni-bg-color-grey;
	overflow: hidden;
	padding-bottom: 124rpx;
	// 填写信息区
	.form-box {
		padding: 20rpx;
		background: $uni-bg-color;
		margin: 20rpx;
		border-radius: $uni-border-radius-base;
		.label {
			color: #999;
		}

		// 图片等信息区
		.name-box {
			border-bottom: 1px solid #ececcc;
			padding: 20rpx 0;
			.row1 {
				image {
					width: 200rpx;
					height: 150rpx;
					border-radius: $uni-border-radius-base;
				}
				.info-box {
					margin-left: 20rpx;
					.price-box {
						font-size: 25rpx;
						margin-top: 10rpx;
						.price {
							color: red;
							font-size: 34rpx;
						}
					}
				}
			}
		}

		.ser-time-box {
			padding: 20rpx 0;
			border-bottom: 1px solid #ececcc;
			.row2 {
				margin-bottom: 20rpx;
			}
			// 服务时间
			.row3 {
				.time-box {
					.time {
						color: #00aaff;
					}
				}
			}
		}
		// 出行方式区
		.out-method-box {
			padding: 20rpx 0;
			border-bottom: 1px solid #ececcc;
			.out-method {
				.explain {
					margin-top: 12rpx;
					background-color: #e6e6e6;
					padding: 10rpx;
					font-size: $uni-font-size-sm;
					border-radius: $uni-border-radius-base;
				}
			}

			.predict-take {
				margin: 20rpx 0;
			}
			.note-box {
				margin-top: 20rpx;
				:deep() {
					.input-placeholder {
						font-size: 25rpx;
						text-align: right;
					}
				}
			}
		}
	}
	// 支付按钮和金额
	.wx-pay {
		height: 124rpx;

		padding: 24rpx 30rpx;
		.money {
			.sum {
				color: red;
				.total {
					font-size: 36rpx;
				}
			}
			.disc {
				color: $uni-text-color-grey;
				.digit {
					color: red;
				}
			}
		}
		.pay-btn {
			margin-right: 0;
			width: 40vw;
			background: #00a900;
			font-size: 36rpx;
			color: #fff;
			line-height: 2;
		}
	}

	// 滚动区域
	.scoll-box {
		height: 38vh;
		display: grid;
		gap: 16px;
		grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
		grid-auto-rows: min-content;
		margin-top: 30rpx;
		.item {
			padding: 5rpx 10rpx;
			text-align: center;
			border-radius: $uni-border-radius-capsule;
			background-color: $uni-bg-color-grey;
			height: fit-content;
		}
	}

	// 下单须知弹出层
	.rich-text-box {
		height: 50vh;
	}
	.bottom {
		height: 40px;
	}
}
</style>
